<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import* as  echarts from 'echarts'
import {mapState} from "vuex";

export default {
  name: "BarCharts",
  data(){
    return{
      barCharts:null
    }
  },
  mounted() {
    this.barCharts= echarts.init(this.$refs.charts)
    //配置options
    let option = {
      xAxis:{
        show:false,
        type: 'category',
      },
      tooltip: {},
      yAxis:{
        show:false
      },
      series:{
        type:'bar',

        color:'cyan'
      },
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
      }
    }
    this.barCharts.setOption(option)
  },
  computed:{
    ...mapState({
      payTrend:state => state.home.SaleData
    })
  },
  watch:{
    payTrend(){
      this.barCharts.setOption({
        series:{
          data:this.payTrend.payTrend,
        }
      })
    }
  }
}
</script>

<style scoped>
.charts{
  width: 100%;
  height: 100%;
}
</style>
